<template>
    <div class="reach-info-dialog">
        <el-dialog
            :title="name"
            :visible.sync="dialogFormVisible"
            :close-on-click-modal="false"
            width="590px"
        >
            <el-form
                ref="reach"
                class="dialog-form"
                :model="form"
                :rules="rules"
                @submit.native.prevent
            >
                <el-form-item
                    v-if="type == 1"
                    label="达成度名称："
                    prop="name"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        v-model.trim="form.name"
                        type="text"
                        placeholder="输入名称"
                        maxlength="15"
                        show-word-limit
                    >
                    </el-input>
                </el-form-item>
                <el-form-item
                    v-if="type == 2"
                    label="设置达成度分数："
                    :label-width="formLabelWidth"
                >
                    <el-input-number
                        v-model="form.thresholdValue"
                        controls-position="right"
                        placeholder="注：满分默认100分"
                        :precision="0"
                        :min="0"
                        :max="100"
                    >

                    </el-input-number>
                </el-form-item>
                <el-form-item
                    v-if="type == 3"
                    label="负责人："
                    prop="principal"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        v-model.trim="form.principal"
                        type="text"
                        placeholder="请输入负责人"
                        maxlength="10"
                        show-word-limit
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    round
                    :loading="loading"
                    size="small"
                    class="btn-hover"
                    @keyup.enter.native="sub('reach')"
                    @click="sub('reach')"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import { editReach } from '../../../../../api/courseReach';

export default {
    data() {
        return {
            type: '',
            name: '',
            loading: false,
            dialogFormVisible: false,
            form: {
                cid: '',
                id: '',
                name: '',
                principal: '',
                thresholdValue: undefined
            },
            info: {},
            formLabelWidth: '125px',
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                principal: [
                    { required: true, message: '请输入负责人', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        init(type, info) {
            this.type = type;
            const { id, name, principal, thresholdValue } = info;
            this.info = info;
            console.log(info)
            if (type == 1) {
                this.name = '修改达成度统计名称';
                this.form.name = name;
            } else if (type == 2) {
                this.name = '修改成绩/达成度阈值';
                this.form.thresholdValue = thresholdValue;
            } else {
                this.name = '修改负责人';
                this.form.principal = principal;
            }

            this.$nextTick(()=>{
                this.$refs.reach.clearValidate()
            });

            this.dialogFormVisible = true;
        },

        sub(name) {
            let msg = null;
            let key = null;
            const data = {
                id: this.info.id,
            };

            if(this.type == 1) {
                msg = this.info.name == this.form.name ? '请修改达成度统计名称' : '';
                data.name = this.form.name;
                key = 'name';
            }

            if(this.type == 2) {
                msg = this.info.thresholdValue == this.form.thresholdValue ? '请修改达成度阈值' : '';
                data.thresholdValue = this.form.thresholdValue;
                key = 'thresholdValue';
            }

            if(this.type == 3) {
                msg = this.info.principal == this.form.principal ? '请修改负责人' : '';
                data.principal = this.form.principal;
                key = 'principal';
            }

            if(msg) {
                this.$message.warning(msg);
                return false;
            }

            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    editReach(data).then((res) =>{
                        this.loading = false;
                        this.$message.success('修改成功');
                        this.$emit('update', key, data[key], this.info.name);
                        this.dialogFormVisible = false;
                    }).catch(() => {
                        this.loading = false;
                    })
                } else {
                    return false;
                }
            });

        }
    }
}
</script>


<style lang="scss">
.reach-info-dialog {
    .dialog-form {
        padding: 26px 62px 0 37px;
    }

    .el-dialog__body {
        padding-bottom: 0;
    }

    .el-input__inner {
        width: 100%;
    }

    .el-input-number {
        width: 100%;
        line-height: 32px;
        .el-input__inner {
            text-align: left;
        }
    }

    .el-input-number__increase,.el-input-number__decrease {
        line-height: 15px !important;
    }

    .el-form-item__content {
        line-height: 30px;
    }

    .el-dialog__footer {
        padding-top: 8px;
    }

    .dialog-footer {
        text-align: center;
        .el-button--small, .el-button--small.is-round {
            padding: 9px 30px;
        }

        .el-button {
            font-size: 14px;
            border-color: #1277EB;
            color: #1277EB;
        }
    }

    .btn-hover:hover {
        background: #1277eb;
        color: #fff !important;
    }
}
</style>
